
<template>
    <el-card shadow="always" style="display: block;width:100%;margin:0;padding:0">
        <!--1. 条件查询表单-->
        <el-form :inline="true" :model="studSearch" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="studSearch.sname" placeholder="学生姓名" clearable />
            </el-form-item>
            <el-form-item>
                <el-input v-model="studSearch.addr" placeholder="学生住址" clearable />
            </el-form-item>
            <el-form-item>
                <el-select
                        v-model="studSearch.cid"
                        placeholder="选择所在班级"
                        clearable>
                    <el-option label="所有班级" value="0" />
                    <el-option :label="c.cname" :value="c.cid" v-for="c in classes" :key="c.cid"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchStudent">查询</el-button>
            </el-form-item>
        </el-form>
        <!--2. 学生列表显示-->
        <el-table :data="students" style="width: 100%">
            <el-table-column label="学号" width="180" prop="sid" align="center"/>
            <el-table-column label="姓名"  prop="sname"  align="center"/>
            <el-table-column label="性别"  prop="sex"  align="center"/>
            <el-table-column label="年龄"  prop="age"  align="center"/>
            <el-table-column label="住址"  prop="addr"  align="center"/>
            <el-table-column label="所在班级"  prop="cname"  align="center"/>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--3. 分页导航-->
        <el-pagination
                v-model:current-page="page"
                v-model:page-size="pageSize"
                :page-sizes="[5, 10, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />

        <!--<el-input v-model="msg"></el-input>-->
        <!--{{msg}}-->
    </el-card>
</template>

<style scoped>
    .el-pagination{
        display: flex;
        justify-content: right;
        margin-top: 20px;
    }
    .el-form{
        display: flex;
        justify-content: left;
    }
</style>
<script setup>
    import {
        Check,
        Delete,
        Edit,
        Message,
        Search,
        Star,
    } from '@element-plus/icons-vue'
    import {ref,onMounted} from 'vue'
    import {findAllStudents,search} from "../../api/student";
    import {findAllClasses} from "../../api/classes";
    // 1. 定义变量的方法，如果修改变量就用：变量名.value=新值 的方式进行修改
    const students = ref([])
    const page = ref(1)
    const pageSize = ref(5)
    const total = ref(100)
    const studSearch = ref({})
    const classes = ref([])
    // const msg = ref('中国人')
    // msg.value = '大家好，我是中国人！'
    // 定义普通方法：
    const handleEdit = (index, row) => {
        console.log(index, row)
    }
    const handleDelete = (index, row) => {
        console.log(index, row)
    }
    // 事件处理函数
    const handleSizeChange = (val) => {
        console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val) => {
        console.log(`current page: ${val}`)
    }
    // 使用生命周期处理函数
    onMounted(()=>{
        // 1. 查询所有学生列表
        // findStudents()
        // 2. 分页带条件查询
        searchStudent()
        // 3. 查询所有班级
        findClasses()
    })
    // 1. 查询所有学生
    const findStudents = ()=>{
        findAllStudents().then(({data})=>{
            console.log("data:",data)
            students.value = data.list
        })
    }
    // 2. 条件查询带分页
    const searchStudent = ()=>{
        search(page.value,pageSize.value,studSearch.value).then(({data})=>{
            if(data.code === 0){
                total.value = data.pr.total
                students.value = data.pr.rows
            }
        })
    }
    //3. 查询所有班级
    const findClasses = ()=>{
        findAllClasses().then(({data})=>{
            classes.value = data.list
        })
    }
</script>